<script setup lang="tsx">
import { ref } from "vue";

const items = ref([
  {
    id: 1,
    name: "susan",
  },
  {
    id: 2,
    name: "susan",
  },
  {
    id: 3,
    name: "susan",
  },
]);
const EasyInputComponent = () => {
  return (
    <div>
      <div class="bg-white p-2 m-1 rounded-sm border-gray-100 border-2 border-solid">
        <slot></slot>
        <div>
          <slot name="prefix"></slot>
        </div>
        <input
          class="border-none bg-transparent outline-none lg:min-w-64"
          placeholder="请输入"
        />
        <slot name="suffix"></slot>
      </div>

      <ul class="bg-green-300 p-2 m-2">
        {items.value.map((item) => (
          <li class="p-1">
            <slot name={item.name}></slot>
          </li>
        ))}
      </ul>
    </div>
  );
};
</script>

<template>
  <EasyInputComponent>
    <div class="text-red-600">嘻嘻</div>
  </EasyInputComponent>
</template>
